---
title: Tailwind CSS Dialog for React - Material Tailwind
description: Customise your web projects with our easy-to-use dialog component for Tailwind CSS and React using Material Design guidelines.
navigation:
  [
    "dialog",
    "dialog-sizes",
    "dialog-custom-animation",
    "dialog-with-form",
    "dialog-with-image",
    "web-3-dialog",
    "long-dialog",
    "message-dialog",
    "notification-dialog",
    "add-product-dialog-crud",
    "dialog-with-checkbox",
    "dialog-with-select",
    "dialog-with-timeline-and-details",
    "dialog-with-progress-bar",
    "dialog-with-billing-form",
    "dialog-props",
    "dialog-header-props",
    "dialog-body-props",
    "dialog-footer-props",
    "types-size",
    "types-dismiss",
    "types-animate",
    "dialog-theme",
    "dialog-theme-object-type",
    "dialog-theme-customization",
    "dialog-header-theme-object-type",
    "dialog-header-theme-customization",
    "dialog-body-theme-object-type",
    "dialog-body-theme-customization",
    "dialog-footer-theme-object-type",
    "dialog-footer-theme-customization",
    "more-examples",
  ]
github: dialog
prev: chip
next: icon-button
---

<DocsTitle href="dialog">
# Tailwind CSS Dialog - React
</DocsTitle>

Use our Tailwind CSS <Code>Dialog</Code> component to inform users about a task or important information that requires decisions, or involves multiple tasks.

A <Code>Dialog</Code> is a type of modal window with critical information that disables all app functionality when they appear and remains on screen until confirmed/dismissed.

See below our <Code>Dialog</Code> example that you can use for your Tailwind CSS and React project.

<br />

<CodePreview link="dialog#dialog" component={<DialogExamples.DialogDefault />}>
```jsx
import React from "react";
import {
  Button,
  Dialog,
  DialogHeader,
  DialogBody,
  DialogFooter,
} from "@material-tailwind/react";

export function DialogDefault() {
  const [open, setOpen] = React.useState(false);

  const handleOpen = () => setOpen(!open);

  return (
    <>
      <Button onClick={handleOpen} variant="gradient">
        Open Dialog
      </Button>
      <Dialog open={open} handler={handleOpen}>
        <DialogHeader>Its a simple dialog.</DialogHeader>
        <DialogBody>
          The key to more success is to have a lot of pillows. Put it this way,
          it took me twenty five years to get these plants, twenty five years of
          blood sweat and tears, and I&apos;m never giving up, I&apos;m just
          getting started. I&apos;m up to something. Fan luv.
        </DialogBody>
        <DialogFooter>
          <Button
            variant="text"
            color="red"
            onClick={handleOpen}
            className="mr-1"
          >
            <span>Cancel</span>
          </Button>
          <Button variant="gradient" color="green" onClick={handleOpen}>
            <span>Confirm</span>
          </Button>
        </DialogFooter>
      </Dialog>
    </>
  );
}
```
</CodePreview>

---

<DocsTitle href="dialog-sizes">
## Dialog Sizes
</DocsTitle>

The <Code>Dialog</Code> component comes with 6 different sizes that you can change it using the <Code>size</Code> prop.

<CodePreview link="dialog#dialog-sizes" component={<DialogExamples.DialogSizes />}>
```jsx
import React from "react";
import {
  Button,
  Dialog,
  DialogHeader,
  DialogBody,
  DialogFooter,
} from "@material-tailwind/react";

export function DialogSizes() {
  const [size, setSize] = React.useState(null);

  const handleOpen = (value) => setSize(value);

  return (
    <>
      <div className="mb-3 flex gap-3">
        <Button onClick={() => handleOpen("xs")} variant="gradient">
          Open Dialog XS
        </Button>
        <Button onClick={() => handleOpen("sm")} variant="gradient">
          Open Dialog SM
        </Button>
        <Button onClick={() => handleOpen("md")} variant="gradient">
          Open Dialog MD
        </Button>
      </div>
      <div className="flex gap-3">
        <Button onClick={() => handleOpen("lg")} variant="gradient">
          Open Dialog LG
        </Button>
        <Button onClick={() => handleOpen("xl")} variant="gradient">
          Open Dialog XL
        </Button>
        <Button onClick={() => handleOpen("xxl")} variant="gradient">
          Open Dialog XXL
        </Button>
      </div>
      <Dialog
        open={
          size === "xs" ||
          size === "sm" ||
          size === "md" ||
          size === "lg" ||
          size === "xl" ||
          size === "xxl"
        }
        size={size || "md"}
        handler={handleOpen}
      >
        <DialogHeader>Its a simple dialog.</DialogHeader>
        <DialogBody>
          The key to more success is to have a lot of pillows. Put it this way,
          it took me twenty five years to get these plants, twenty five years of
          blood sweat and tears, and I&apos;m never giving up, I&apos;m just
          getting started. I&apos;m up to something. Fan luv.
        </DialogBody>
        <DialogFooter>
          <Button
            variant="text"
            color="red"
            onClick={() => handleOpen(null)}
            className="mr-1"
          >
            <span>Cancel</span>
          </Button>
          <Button
            variant="gradient"
            color="green"
            onClick={() => handleOpen(null)}
          >
            <span>Confirm</span>
          </Button>
        </DialogFooter>
      </Dialog>
    </>
  );
}
```
</CodePreview>

---

<DocsTitle href="dialog-custom-animation">
## Dialog Custom Animation
</DocsTitle>

You can modify the open/close state animation for <Code>Dialog</Code> component using the <Code>animate</Code> prop.

<CodePreview link="dialog#dialog-custom-animation" component={<DialogExamples.DialogCustomAnimation />}>
```jsx
import React from "react";
import {
  Button,
  Dialog,
  DialogHeader,
  DialogBody,
  DialogFooter,
} from "@material-tailwind/react";

export function DialogCustomAnimation() {
  const [open, setOpen] = React.useState(false);

  const handleOpen = () => setOpen(!open);

  return (
    <>
      <Button onClick={handleOpen} variant="gradient">
        Open Dialog
      </Button>
      <Dialog
        open={open}
        handler={handleOpen}
        animate={{
          mount: { scale: 1, y: 0 },
          unmount: { scale: 0.9, y: -100 },
        }}
      >
        <DialogHeader>Its a simple dialog.</DialogHeader>
        <DialogBody>
          The key to more success is to have a lot of pillows. Put it this way,
          it took me twenty five years to get these plants, twenty five years of
          blood sweat and tears, and I&apos;m never giving up, I&apos;m just
          getting started. I&apos;m up to something. Fan luv.
        </DialogBody>
        <DialogFooter>
          <Button
            variant="text"
            color="red"
            onClick={handleOpen}
            className="mr-1"
          >
            <span>Cancel</span>
          </Button>
          <Button variant="gradient" color="green" onClick={handleOpen}>
            <span>Confirm</span>
          </Button>
        </DialogFooter>
      </Dialog>
    </>
  );
}
```
</CodePreview>

---

<DocsTitle href="dialog-with-form">
## Dialog with Form
</DocsTitle>

Use the example below to create a dialog with a sign in form.

<CodePreview link="dialog#dialog-with-form" component={<DialogExamples.DialogWithForm />}>
```jsx
import React from "react";
import {
  Button,
  Dialog,
  Card,
  CardHeader,
  CardBody,
  CardFooter,
  Typography,
  Input,
  Checkbox,
} from "@material-tailwind/react";

export function DialogWithForm() {
  const [open, setOpen] = React.useState(false);
  const handleOpen = () => setOpen((cur) => !cur);

  return (
    <>
      <Button onClick={handleOpen}>Sign In</Button>
      <Dialog
        size="xs"
        open={open}
        handler={handleOpen}
        className="bg-transparent shadow-none"
      >
        <Card className="mx-auto w-full max-w-[24rem]">
          <CardBody className="flex flex-col gap-4">
            <Typography variant="h4" color="blue-gray">
              Sign In
            </Typography>
            <Typography
              className="mb-3 font-normal"
              variant="paragraph"
              color="gray"
            >
              Enter your email and password to Sign In.
            </Typography>
            <Typography className="-mb-2" variant="h6">
              Your Email
            </Typography>
            <Input label="Email" size="lg" />
            <Typography className="-mb-2" variant="h6">
              Your Password
            </Typography>
            <Input label="Password" size="lg" />
            <div className="-ml-2.5 -mt-3">
              <Checkbox label="Remember Me" />
            </div>
          </CardBody>
          <CardFooter className="pt-0">
            <Button variant="gradient" onClick={handleOpen} fullWidth>
              Sign In
            </Button>
            <Typography variant="small" className="mt-4 flex justify-center">
              Don&apos;t have an account?
              <Typography
                as="a"
                href="#signup"
                variant="small"
                color="blue-gray"
                className="ml-1 font-bold"
                onClick={handleOpen}
              >
                Sign up
              </Typography>
            </Typography>
          </CardFooter>
        </Card>
      </Dialog>
    </>
  );
}
```
</CodePreview>

---

<DocsTitle href="dialog-with-image">
## Dialog with Image
</DocsTitle>

Use the example below to create a dialog with an image inside, similar to unsplash.

<CodePreview link="dialog#dialog-with-image" component={<DialogExamples.DialogWithImage />}>
```jsx
import React from "react";
import {
  Button,
  Dialog,
  DialogHeader,
  DialogBody,
  DialogFooter,
  Avatar,
  IconButton,
  Typography,
  Card,
} from "@material-tailwind/react";

export function DialogWithImage() {
  const [open, setOpen] = React.useState(false);
  const [isFavorite, setIsFavorite] = React.useState(false);

  const handleOpen = () => setOpen((cur) => !cur);
  const handleIsFavorite = () => setIsFavorite((cur) => !cur);

  return (
    <>
      <Card
        className="h-64 w-96 cursor-pointer overflow-hidden transition-opacity hover:opacity-90"
        onClick={handleOpen}
      >
        <img
          alt="nature"
          className="h-full w-full object-cover object-center"
          src="https://images.unsplash.com/photo-1485470733090-0aae1788d5af?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2717&q=80"
        />
      </Card>
       <Dialog size="xl" open={open} handler={handleOpen}>
        <DialogHeader className="justify-between">
          <div className="flex items-center gap-3">
            <Avatar
              size="sm"
              variant="circular"
              alt="tania andrew"
              src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1480&q=80"
            />
            <div className="-mt-px flex flex-col">
              <Typography
                variant="small"
                color="blue-gray"
                className="font-medium"
              >
                Tania Andrew
              </Typography>
              <Typography
                variant="small"
                color="gray"
                className="text-xs font-normal"
              >
                @emmaroberts
              </Typography>
            </div>
          </div>
          <div className="flex items-center gap-2">
            <IconButton
              variant="text"
              size="sm"
              color={isFavorite ? "red" : "blue-gray"}
              onClick={handleIsFavorite}
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="currentColor"
                className="h-5 w-5"
              >
                <path d="M11.645 20.91l-.007-.003-.022-.012a15.247 15.247 0 01-.383-.218 25.18 25.18 0 01-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0112 5.052 5.5 5.5 0 0116.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 01-4.244 3.17 15.247 15.247 0 01-.383.219l-.022.012-.007.004-.003.001a.752.752 0 01-.704 0l-.003-.001z" />
              </svg>
            </IconButton>
            <Button color="gray" size="sm">
              Free Download
            </Button>
          </div>
        </DialogHeader>
        <DialogBody>
          <img
            alt="nature"
            className="h-[48rem] w-full rounded-lg object-cover object-center"
            src="https://images.unsplash.com/photo-1485470733090-0aae1788d5af?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2717&q=80"
          />
        </DialogBody>
        <DialogFooter className="justify-between">
          <div className="flex items-center gap-16">
            <div>
              <Typography variant="small" color="gray" className="font-normal">
                Views
              </Typography>
              <Typography color="blue-gray" className="font-medium">
                44,082,044
              </Typography>
            </div>
            <div>
              <Typography variant="small" color="gray" className="font-normal">
                Downloads
              </Typography>
              <Typography color="blue-gray" className="font-medium">
                553,031
              </Typography>
            </div>
          </div>
          <Button
            size="sm"
            variant="outlined"
            color="blue-gray"
            className="mr-5 flex items-center"
          >
            Share
          </Button>
        </DialogFooter>
      </Dialog>
    </>
  );
}
```
</CodePreview>

---

<DocsTitle href="web-3-dialog">
## Web 3.0 Dialog
</DocsTitle>

Use the example below to create a Web 3.0 wallet connect dialog.

<CodePreview link="dialog#web-3-dialog" component={<DialogExamples.Web3Dialog />}>
```jsx
import React from "react";
import {
  Button,
  Dialog,
  DialogHeader,
  DialogBody,
  DialogFooter,
  IconButton,
  Typography,
  MenuItem,
} from "@material-tailwind/react";

export function Web3Dialog() {
  const [open, setOpen] = React.useState(false);

  const handleOpen = () => setOpen((cur) => !cur);

  return (
    <>
      <Button onClick={handleOpen}>Connect Wallet</Button>
    <Dialog size="xs" open={open} handler={handleOpen}>
        <DialogHeader className="justify-between">
          <div>
            <Typography variant="h5" color="blue-gray">
              Connect a Wallet
            </Typography>
            <Typography color="gray" variant="paragraph">
              Choose which card you want to connect
            </Typography>
          </div>
          <IconButton
            color="blue-gray"
            size="sm"
            variant="text"
            onClick={handleOpen}
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
              strokeWidth={2}
              className="h-5 w-5"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M6 18L18 6M6 6l12 12"
              />
            </svg>
          </IconButton>
        </DialogHeader>
        <DialogBody className="overflow-y-scroll !px-5">
          <div className="mb-6">
            <Typography
              variant="paragraph"
              color="blue-gray"
              className="py-3 font-semibold uppercase opacity-70"
            >
              Popular
            </Typography>
            <ul className="mt-3 -ml-2 flex flex-col gap-1">
              <MenuItem className="mb-4 flex items-center justify-center gap-3 !py-4 shadow-md">
                <img
                  src="https://docs.material-tailwind.com/icons/metamask.svg"
                  alt="metamast"
                  className="h-6 w-6"
                />
                <Typography
                  className="uppercase"
                  color="blue-gray"
                  variant="h6"
                >
                  Connect with MetaMask
                </Typography>
              </MenuItem>
              <MenuItem className="mb-1 flex items-center justify-center gap-3 !py-4 shadow-md">
                <img
                  src="https://docs.material-tailwind.com/icons/coinbase.svg"
                  alt="metamast"
                  className="h-6 w-6 rounded-md"
                />
                <Typography
                  className="uppercase"
                  color="blue-gray"
                  variant="h6"
                >
                  Connect with Coinbase
                </Typography>
              </MenuItem>
            </ul>
          </div>
          <div>
            <Typography
              variant="paragraph"
              color="blue-gray"
              className="py-4 font-semibold uppercase opacity-70"
            >
              Other
            </Typography>
            <ul className="mt-4 -ml-2.5 flex flex-col gap-1">
              <MenuItem className="mb-4 flex items-center justify-center gap-3 !py-4 shadow-md">
                <img
                  src="https://docs.material-tailwind.com/icons/trust-wallet.svg"
                  alt="metamast"
                  className="h-7 w-7 rounded-md border border-blue-gray-50"
                />
                <Typography
                  className="uppsecase"
                  color="blue-gray"
                  variant="h6"
                >
                  Connect with Trust Wallet
                </Typography>
              </MenuItem>
            </ul>
          </div>
        </DialogBody>
        <DialogFooter className="justify-between gap-2">
          <Typography variant="small" color="gray" className="font-normal">
            New to Ethereum wallets?
          </Typography>
          <Button variant="outlined" size="sm">
            Learn More
          </Button>
        </DialogFooter>
      </Dialog>
    </>
  );
}
```
</CodePreview>

---

<DocsTitle href="long-dialog">
## Long Dialog
</DocsTitle>

Use this example of a long dialog to present extensive information or content that requires careful reading and consideration. This dialog is designed to handle lengthy text, ensuring it remains readable and accessible.

<CodePreview className="mt-4" component={<DialogExamples.LongDialog />}>
```jsx
import React from "react";
import {
  Button,
  Dialog,
  DialogHeader,
  DialogBody,
  DialogFooter,
  Typography,
} from "@material-tailwind/react";

export function LongDialog() {
  const [open, setOpen] = React.useState(false);

  const handleOpen = () => setOpen(!open);

  return (
    <>
      <Button onClick={handleOpen}>Long Dialog</Button>
      <Dialog open={open} handler={handleOpen}>
        <DialogHeader>Long Dialog</DialogHeader>
        <DialogBody className="h-[42rem] overflow-scroll">
          <Typography className="font-normal">
            I&apos;ve always had unwavering confidence in my abilities, and I
            believe our thoughts and self-perception are the primary forces that
            shape us. Many people limit themselves by their own self-doubt,
            slowing their progress. Fortunately, I was raised with the belief
            that I could achieve anything.
            <br />
            <br />
            As we journey through life, we often encounter challenges that
            harden our hearts. Pain, insults, broken trust, and betrayal can
            make us hesitant to help others. Love can lead to heartbreak, and
            time can distance us from family. These experiences can gradually
            erode our optimism.
            <br /> <br />
            Life doesn&apos;t always place us where we want to be. We grow, make
            mistakes, and strive to express ourselves and fulfill our dreams. If
            we&apos;re fortunate enough to participate in life&apos;s journey,
            we should cherish every moment. Regrettably, some only recognize the
            value of a moment after it&apos;s passed.
            <br /> <br />
            One thing I&apos;ve learned is that I can excel at anything I set my
            mind to. My skill is my ability to learn. I&apos;m here to learn, to
            grow, and to inspire others to do the same. Don&apos;t fear making
            mistakes; they teach us far more than compliments ever will.
            Ultimately, what truly matters is how our actions inspire and
            motivate others. Some will be ignited by our endeavors, while others
            may be offended—it&apos;s all part of the process. I'm here to
            pursue my dreams and encourage others to do the same.
            <br /> <br />
            Now is the time to embrace greatness without fear of judgment. Some
            may resent those who shine brightly or stand out, but it&apos;s time
            to be the best version of ourselves. Do you have faith in your
            beliefs, even if you&apos;re the only one who does?
          </Typography>
        </DialogBody>
        <DialogFooter className="space-x-2">
          <Button variant="text" color="blue-gray" onClick={handleOpen}>
            cancel
          </Button>
          <Button variant="gradient" color="green" onClick={handleOpen}>
            confirm
          </Button>
        </DialogFooter>
      </Dialog>
    </>
  );
}
```
</CodePreview>

---

<DocsTitle href="message-dialog">
## Message Dialog
</DocsTitle>

Use this example of a message dialog to facilitate direct communication between users. The dialog includes fields for entering a username and the message content, providing a straightforward interface for sending messages.

This dialog example is ideal for enabling user-to-user communication within an application, ensuring a simple and effective way to send messages.

<CodePreview className="mt-4" component={<DialogExamples.MessageDialog />}>
```jsx
import React from "react";
import {
  Button,
  Dialog,
  DialogHeader,
  DialogBody,
  DialogFooter,
  Input,
  Textarea,
} from "@material-tailwind/react";

export function MessageDialog() {
  const [open, setOpen] = React.useState(false);

  const handleOpen = () => setOpen(!open);

  return (
    <>
      <Button onClick={handleOpen}>Message Dialog</Button>
    <Dialog open={open} size="xs" handler={handleOpen}>
        <div className="flex items-center justify-between">
          <DialogHeader className="flex flex-col items-start">
            {" "}
            <Typography className="mb-1" variant="h4">
              New message to @{" "}
            </Typography>
          </DialogHeader>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="currentColor"
            className="mr-3 h-5 w-5"
            onClick={handleOpen}
          >
            <path
              fillRule="evenodd"
              d="M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06z"
              clipRule="evenodd"
            />
          </svg>
        </div>
        <DialogBody>
          <Typography className="mb-10 -mt-7 " color="gray" variant="lead">
            Write the message and then click button.
          </Typography>
          <div className="grid gap-6">
            <Typography className="-mb-1" color="blue-gray" variant="h6">
              Username
            </Typography>
            <Input label="Username" />
            <Textarea label="Message" />
          </div>
        </DialogBody>
        <DialogFooter className="space-x-2">
          <Button variant="text" color="gray" onClick={handleOpen}>
            cancel
          </Button>
          <Button variant="gradient" color="gray" onClick={handleOpen}>
            send message
          </Button>
        </DialogFooter>
      </Dialog>
    </>
  );
}
```
</CodePreview>

---

<DocsTitle href="notification-dialog">
## Notification Dialog
</DocsTitle>

Use this example of a notification dialog to draw users' attention to important information or actions required. The dialog includes a prominent title, a message area for detailed information, and action buttons for user response. 

<CodePreview className="mt-4" component={<DialogExamples.NotificationDialog />}>
```jsx
import React from "react";
import {
  Button,
  Dialog,
  DialogHeader,
  DialogBody,
  DialogFooter,
  Typography,
} from "@material-tailwind/react";

export function NotificationDialog() {
  const [open, setOpen] = React.useState(false);

  const handleOpen = () => setOpen(!open);

  return (
    <>
      <Button onClick={handleOpen}>Notification</Button>
      <Dialog open={open} handler={handleOpen}>
        <DialogHeader>
          <Typography variant="h5" color="blue-gray">
            Your Attention is Required!
          </Typography>
        </DialogHeader>
        <DialogBody divider className="grid place-items-center gap-4">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="currentColor"
            className="h-16 w-16 text-red-500"
          >
            <path
              fillRule="evenodd"
              d="M5.25 9a6.75 6.75 0 0113.5 0v.75c0 2.123.8 4.057 2.118 5.52a.75.75 0 01-.297 1.206c-1.544.57-3.16.99-4.831 1.243a3.75 3.75 0 11-7.48 0 24.585 24.585 0 01-4.831-1.244.75.75 0 01-.298-1.205A8.217 8.217 0 005.25 9.75V9zm4.502 8.9a2.25 2.25 0 104.496 0 25.057 25.057 0 01-4.496 0z"
              clipRule="evenodd"
            />
          </svg>
          <Typography color="red" variant="h4">
            You should read this!
          </Typography>
          <Typography className="text-center font-normal">
            A small river named Duden flows by their place and supplies it with
            the necessary regelialia.
          </Typography>
        </DialogBody>
        <DialogFooter className="space-x-2">
          <Button variant="text" color="blue-gray" onClick={handleOpen}>
            close
          </Button>
          <Button variant="gradient" onClick={handleOpen}>
            Ok, Got it
          </Button>
        </DialogFooter>
      </Dialog>
    </>
  );
}
```
</CodePreview>

---

<DocsTitle href="add-product-dialog-crud">
## Add Product Dialog CRUD
</DocsTitle>

This Tailwind CSS dialog allows users to manage items by providing input fields for the name, category, weight, size, and an optional description. The form is straightforward and easy to use, with an "Add Product" button to submit the information.

<CodePreview className="mt-4" component={<DialogExamples.AddProductDialog />}>
```jsx
import React from "react";
import {
  Input,
  Option,
  Select,
  Button,
  Dialog,
  Textarea,
  IconButton,
  Typography,
  DialogBody,
  DialogHeader,
  DialogFooter,
} from "@material-tailwind/react";
import { XMarkIcon } from "@heroicons/react/24/outline";

export function AddProductDialog() {
  const [open, setOpen] = React.useState(false);

  const handleOpen = () => setOpen(!open);

  return (
    <>
      <Button onClick={handleOpen} variant="gradient">
        Add Product
      </Button>
      <Dialog size="sm" open={open} handler={handleOpen} className="p-4">
        <DialogHeader className="relative m-0 block">
          <Typography variant="h4" color="blue-gray">
            Manage Item
          </Typography>
          <Typography className="mt-1 font-normal text-gray-600">
            Keep your records up-to-date and organized.
          </Typography>
          <IconButton
            size="sm"
            variant="text"
            className="!absolute right-3.5 top-3.5"
            onClick={handleOpen}
          >
            <XMarkIcon className="h-4 w-4 stroke-2" />
          </IconButton>
        </DialogHeader>
        <DialogBody className="space-y-4 pb-6">
          <div>
            <Typography
              variant="small"
              color="blue-gray"
              className="mb-2 text-left font-medium"
            >
              Name
            </Typography>
            <Input
              color="gray"
              size="lg"
              placeholder="eg. White Shoes"
              name="name"
              className="placeholder:opacity-100 focus:!border-t-gray-900"
              containerProps={{
                className: "!min-w-full",
              }}
              labelProps={{
                className: "hidden",
              }}
            />
          </div>
          <div>
            <Typography
              variant="small"
              color="blue-gray"
              className="mb-2 text-left font-medium"
            >
              Category
            </Typography>
            <Select
              className="!w-full !border-[1.5px] !border-blue-gray-200/90 !border-t-blue-gray-200/90 bg-white text-gray-800 ring-4 ring-transparent placeholder:text-gray-600 focus:!border-primary focus:!border-t-blue-gray-900 group-hover:!border-primary"
              placeholder="1"
              labelProps={{
                className: "hidden",
              }}
            >
              <Option>Clothing</Option>
              <Option>Fashion</Option>
              <Option>Watches</Option>
            </Select>
          </div>
          <div className="flex gap-4">
            <div className="w-full">
              <Typography
                variant="small"
                color="blue-gray"
                className="mb-2 text-left font-medium"
              >
                Weight
              </Typography>
              <Input
                color="gray"
                size="lg"
                placeholder="eg. <8.8oz | 250g"
                name="weight"
                className="placeholder:opacity-100 focus:!border-t-gray-900"
                containerProps={{
                  className: "!min-w-full",
                }}
                labelProps={{
                  className: "hidden",
                }}
              />
            </div>
            <div className="w-full">
              <Typography
                variant="small"
                color="blue-gray"
                className="mb-2 text-left font-medium"
              >
                Size
              </Typography>
              <Input
                color="gray"
                size="lg"
                placeholder="eg. US 8"
                name="size"
                className="placeholder:opacity-100 focus:!border-t-gray-900"
                containerProps={{
                  className: "!min-w-full",
                }}
                labelProps={{
                  className: "hidden",
                }}
              />
            </div>
          </div>
          <div>
            <Typography
              variant="small"
              color="blue-gray"
              className="mb-2 text-left font-medium"
            >
              Description (Optional)
            </Typography>
            <Textarea
              rows={7}
              placeholder="eg. This is a white shoes with a comfortable sole."
              className="!w-full !border-[1.5px] !border-blue-gray-200/90 !border-t-blue-gray-200/90 bg-white text-gray-600 ring-4 ring-transparent focus:!border-primary focus:!border-t-blue-gray-900 group-hover:!border-primary"
              labelProps={{
                className: "hidden",
              }}
            />
          </div>
        </DialogBody>
        <DialogFooter>
          <Button className="ml-auto" onClick={handleOpen}>
            Add Product
          </Button>
        </DialogFooter>
      </Dialog>
    </>
  );
}
```
</CodePreview>

---

<DocsTitle href="dialog-with-checkbox">
## Dialog with Checkbox
</DocsTitle>

Try this checkbox dialog to help users organize their contacts based on interests and interactions. Users can select categories such as “Updates”, “Leads”, and “Webinars”. A "Save Categories" button enables users to save their selections.

<CodePreview className="mt-4" component={<DialogExamples.SelectCategoriesDialog />}>
```jsx
import React from "react";
import {
  Button,
  Dialog,
  Checkbox,
  Typography,
  DialogBody,
  IconButton,
  DialogHeader,
  DialogFooter,
} from "@material-tailwind/react";
import { XMarkIcon } from "@heroicons/react/24/outline";

export function SelectCategoriesDialog() {
  const [open, setOpen] = React.useState(false);

  const handleOpen = () => setOpen(!open);

  return (
    <>
      <Button onClick={handleOpen} variant="gradient">
        Select Categories Dialog
      </Button>
      <Dialog size="sm" open={open} handler={handleOpen} className="p-4">
        <DialogHeader className="relative m-0 block">
          <Typography variant="h4" color="blue-gray">
            Select Categories
          </Typography>
          <Typography className="mt-1 font-normal text-gray-600">
            Categories help you organize your contacts based on their interests
            and interactions.
          </Typography>
          <IconButton
            size="sm"
            variant="text"
            className="!absolute right-3.5 top-3.5"
            onClick={handleOpen}
          >
            <XMarkIcon className="h-4 w-4 stroke-2" />
          </IconButton>
        </DialogHeader>
        <DialogBody className="space-y-4 px-2">
          <Checkbox
            label={
              <div>
                <Typography color="blue-gray" className="text-base font-medium">
                  Updates
                </Typography>
                <Typography
                  variant="small"
                  color="gray"
                  className="font-normal"
                >
                  Receive the latest news and updates.
                </Typography>
              </div>
            }
            containerProps={{
              className: "-mt-5",
            }}
          />
          <Checkbox
            label={
              <div>
                <Typography color="blue-gray" className="font-medium">
                  Leads
                </Typography>
                <Typography
                  variant="small"
                  color="gray"
                  className="font-normal"
                >
                  Potential clients and interested parties.
                </Typography>
              </div>
            }
            containerProps={{
              className: "-mt-5",
            }}
          />
          <Checkbox
            label={
              <div>
                <Typography color="blue-gray" className="font-medium">
                  Webinars
                </Typography>
                <Typography
                  variant="small"
                  color="gray"
                  className="font-normal"
                >
                  Interested in attending webinars and online events.
                </Typography>
              </div>
            }
            containerProps={{
              className: "-mt-5",
            }}
          />
        </DialogBody>
        <DialogFooter>
          <Button className="ml-auto" onClick={handleOpen}>
            save categories
          </Button>
        </DialogFooter>
      </Dialog>
    </>
  );
}
```
</CodePreview>

---

<DocsTitle href="dialog-with-select">
## Dialog with Select
</DocsTitle>

This dialog example provides options for users to select their preferred delivery method. The selected method is highlighted for clarity, and users can confirm their choice by clicking the call-to-action button.

<CodePreview className="mt-4" component={<DialogExamples.DeliveryMethodDialog />}>
```jsx
import React from "react";
import {
  Button,
  Dialog,
  IconButton,
  Typography,
  DialogBody,
  DialogHeader,
  DialogFooter,
} from "@material-tailwind/react";
import { XMarkIcon } from "@heroicons/react/24/outline";

export function DeliveryMethodDialog() {
  const [open, setOpen] = React.useState(false);

  const handleOpen = () => setOpen(!open);

  return (
    <>
      <Button onClick={handleOpen} variant="gradient">
        Delivery Method Dialog
      </Button>
      <Dialog size="sm" open={open} handler={handleOpen} className="p-4">
        <DialogHeader className="relative m-0 block">
          <Typography variant="h4" color="blue-gray">
            Delivery Method
          </Typography>
          <Typography className="mt-1 font-normal text-gray-600">
            Please select your preferred delivery method for your order.
          </Typography>
          <IconButton
            size="sm"
            variant="text"
            className="!absolute right-3.5 top-3.5"
            onClick={handleOpen}
          >
            <XMarkIcon className="h-4 w-4 stroke-2" />
          </IconButton>
        </DialogHeader>
        <DialogBody>
          <div className="space-y-4">
            <div>
              <input
                type="radio"
                id="standard"
                name="hosting"
                value="standard"
                className="peer hidden"
                required
              />
              <label
                htmlFor="standard"
                className="block w-full cursor-pointer rounded-lg border border-gray-300 p-4 text-gray-900 ring-1 ring-transparent peer-checked:border-gray-900 peer-checked:ring-gray-900"
              >
                <div className="block">
                  <Typography className="font-semibold">
                    Express Delivery
                  </Typography>
                  <Typography className="font-normal text-gray-600">
                    5-7 business days.{" "}
                    <strong className="text-gray-900">Free</strong>
                  </Typography>
                </div>
              </label>
            </div>
            <div>
              <input
                type="radio"
                id="express"
                name="hosting"
                defaultChecked
                value="express"
                className="peer hidden"
                required
              />
              <label
                htmlFor="express"
                className="block w-full cursor-pointer rounded-lg border border-gray-300 p-4 text-gray-900 ring-1 ring-transparent peer-checked:border-gray-900 peer-checked:ring-gray-900"
              >
                <div className="block">
                  <Typography className="font-semibold">
                    Express Delivery
                  </Typography>
                  <Typography className="font-normal text-gray-600">
                    2-3 business days.{" "}
                    <strong className="text-gray-900">$10.00</strong>
                  </Typography>
                </div>
              </label>
            </div>
            <div>
              <input
                type="radio"
                id="store"
                name="hosting"
                value="store"
                className="peer hidden"
                required
              />
              <label
                htmlFor="store"
                className="block w-full cursor-pointer rounded-lg border border-gray-300 p-4 text-gray-900 ring-1 ring-transparent peer-checked:border-gray-900 peer-checked:ring-gray-900"
              >
                <div className="block">
                  <Typography className="font-semibold">
                    Pickup In-Store
                  </Typography>
                  <Typography className="font-normal text-gray-600">
                    Available for pickup within 24 hours.{" "}
                    <strong className="text-gray-900">Free</strong>
                  </Typography>
                </div>
              </label>
            </div>
          </div>
        </DialogBody>
        <DialogFooter>
          <Button className="ml-auto" onClick={handleOpen}>
            confirm delivery method
          </Button>
        </DialogFooter>
      </Dialog>
    </>
  );
}
```
</CodePreview>
 
---

<DocsTitle href="dialog-with-timeline-and-details">
## Dialog with Timeline and Details
</DocsTitle>

This modal displays detailed order information in a timeline format. Use this component example to let users easily track the status of their order and click the CTA button "More Details" for additional information.

<CodePreview className="mt-4" component={<DialogExamples.OrderDetailsDialog />}>
```jsx
import React from "react";
import {
  Button,
  Dialog,
  IconButton,
  Typography,
  DialogBody,
  DialogHeader,
  DialogFooter,
  Timeline,
  TimelineItem,
  TimelineConnector,
  TimelineHeader,
  TimelineIcon,
  TimelineBody,
} from "@material-tailwind/react";
import {
  HomeIcon,
  BellIcon,
  CurrencyDollarIcon,
} from "@heroicons/react/24/solid";
import { XMarkIcon } from "@heroicons/react/24/outline";

export function OrderDetailsDialog() {
  const [open, setOpen] = React.useState(false);

  const handleOpen = () => setOpen(!open);

  return (
    <>
      <Button onClick={handleOpen} variant="gradient">
        Order Details Dialog
      </Button>
      <Dialog size="sm" open={open} handler={handleOpen}>
        <DialogHeader className="relative m-0 block p-6">
          <Typography variant="h4" color="blue-gray">
            Delivery Method
          </Typography>
          <Typography className="mt-1 font-normal text-gray-600">
            Please select your preferred delivery method for your order.
          </Typography>
          <IconButton
            size="sm"
            variant="text"
            className="!absolute right-3.5 top-3.5"
            onClick={handleOpen}
          >
            <XMarkIcon className="h-4 w-4 stroke-2" />
          </IconButton>
        </DialogHeader>
        <DialogBody className="mx-4 -mt-4">
          <Timeline>
            <TimelineItem>
              <TimelineConnector />
              <TimelineHeader>
                <TimelineIcon className="p-2">
                  <HomeIcon className="h-4 w-4" />
                </TimelineIcon>
                <Typography color="blue-gray" className="font-semibold">
                  $2,400, Design Changes
                </Typography>
              </TimelineHeader>
              <TimelineBody className="-mt-2 pb-8">
                <Typography color="gray" className="font-normal text-gray-600">
                  22 Dec 6:20 PM
                </Typography>
              </TimelineBody>
            </TimelineItem>
            <TimelineItem>
              <TimelineConnector />
              <TimelineHeader>
                <TimelineIcon className="p-2">
                  <BellIcon className="h-4 w-4" />
                </TimelineIcon>
                <Typography color="blue-gray" className="font-semibold">
                  New order #1832412
                </Typography>
              </TimelineHeader>
              <TimelineBody className="-mt-2 pb-8">
                <Typography color="gray" className="font-normal text-gray-600">
                  21 Dec 8:20 PM
                </Typography>
              </TimelineBody>
            </TimelineItem>
            <TimelineItem>
              <TimelineConnector />
              <TimelineHeader>
                <TimelineIcon className="p-2">
                  <CurrencyDollarIcon className="h-4 w-4" />
                </TimelineIcon>
                <Typography color="blue-gray" className="font-semibold">
                  Payment Completed
                </Typography>
              </TimelineHeader>
              <TimelineBody className="-mt-2">
                <Typography color="gray" className="font-normal text-gray-600">
                  17 Dec 4:20 PM
                </Typography>
              </TimelineBody>
            </TimelineItem>
          </Timeline>
        </DialogBody>
        <DialogFooter>
          <Button className="mr-auto" onClick={handleOpen}>
            more details
          </Button>
        </DialogFooter>
      </Dialog>
    </>
  );
}
```
</CodePreview>
 
 ---

 <DocsTitle href="dialog-with-progress-bar">
## Dialog with Progress Bar
</DocsTitle>

This progress bar dialog provides real-time feedback on the upload status of a file. Users can see the file name, file size, and a progress bar indicating the upload percentage. This tailwind dialog also includes options to cancel the upload if needed.

<CodePreview className="mt-4" component={<DialogExamples.UploadProgressDialog />}>
```jsx
import React from "react";
import {
  Button,
  Dialog,
  Progress,
  Typography,
  DialogBody,
  IconButton,
  DialogHeader,
  DialogFooter,
} from "@material-tailwind/react";
import { XMarkIcon } from "@heroicons/react/24/outline";
import { InformationCircleIcon } from "@heroicons/react/24/solid";

export function UploadProgressDialog() {
  const [open, setOpen] = React.useState(false);

  const handleOpen = () => setOpen(!open);

  return (
    <>
      <Button onClick={handleOpen} variant="gradient">
        Upload Progress Dialog
      </Button>
      <Dialog open={open} handler={handleOpen} className="p-4">
        <DialogHeader className="relative m-0 block">
          <Typography variant="h4" color="blue-gray">
            Upload Progress
          </Typography>
          <Typography className="mt-1 font-normal text-gray-600">
            Please wait while we process your request. You can track the upload
            progress below.
          </Typography>
          <IconButton
            size="sm"
            variant="text"
            className="!absolute right-3.5 top-3.5"
            onClick={handleOpen}
          >
            <XMarkIcon className="h-4 w-4 stroke-2" />
          </IconButton>
        </DialogHeader>
        <DialogBody>
          <div className="w-full">
            <div className="mb-2 flex items-center justify-between gap-4">
              <Typography
                color="blue-gray"
                variant="small"
                className="font-semibold"
              >
                Uploading...
              </Typography>
              <Typography
                variant="small"
                className="font-semibold text-gray-600"
              >
                50%
              </Typography>
            </div>
            <Progress value={50} />
          </div>
          <div className="mt-6 flex gap-16">
            <div>
              <Typography className="font-normal text-gray-600">
                File Name
              </Typography>
              <Typography color="blue-gray" className="font-semibold">
                project_proposal.pdf
              </Typography>
            </div>
            <div>
              <Typography className="font-normal text-gray-600">
                File Size
              </Typography>
              <Typography color="blue-gray" className="font-semibold">
                10 MB
              </Typography>
            </div>
          </div>
        </DialogBody>
        <DialogFooter className="flex flex-wrap justify-between gap-4">
          <Typography
            variant="small"
            className="flex gap-2 font-normal text-gray-600 md:items-center"
          >
            <InformationCircleIcon className="h-5 w-5 text-gray-900" />
            Closing this window may interrupt the upload process.
          </Typography>
          <Button onClick={handleOpen} className="w-full lg:max-w-fit">
            cancel upload
          </Button>
        </DialogFooter>
      </Dialog>
    </>
  );
}
```
</CodePreview>

---

<DocsTitle href="dialog-with-billing-form">
## Dialog With Billing Form
</DocsTitle>

Try this dialog designed for linking a payment card, including fields for cardholder name, card number, expiration date, and CVV. It concludes with a call-to-action "Submit" button.


<CodePreview className="mt-4" component={<DialogExamples.DialogWithBillingForm />}>
```jsx
import React from "react";
import {
  Input,
  Button,
  Dialog,
  IconButton,
  Typography,
  DialogBody,
  DialogHeader,
  DialogFooter,
} from "@material-tailwind/react";
import { XMarkIcon } from "@heroicons/react/24/outline";

export function DialogWithBillingForm() {
  const [open, setOpen] = React.useState(false);

  const handleOpen = () => setOpen(!open);

  return (
    <>
      <Button onClick={handleOpen} variant="gradient">
        Dialog With Billing Form
      </Button>
      <Dialog size="sm" open={open} handler={handleOpen} className="p-4">
        <DialogHeader className="relative m-0 block">
          <Typography variant="h4" color="blue-gray">
            Link Payment Card
          </Typography>
          <Typography className="mt-1 font-normal text-gray-600">
            Complete the form below with your card details to link your card.
          </Typography>
          <IconButton
            size="sm"
            variant="text"
            className="!absolute right-3.5 top-3.5"
            onClick={handleOpen}
          >
            <XMarkIcon className="h-4 w-4 stroke-2" />
          </IconButton>
        </DialogHeader>
        <DialogBody className="space-y-4 pb-6">
          <Button
            fullWidth
            variant="outlined"
            className="h-12 border-blue-500 focus:ring-blue-100/50"
          >
            <img
              src="/icons/Paypal icon.svg"
              className="mx-auto grid h-12 w-16 -translate-y-7 place-items-center"
              alt="paypal"
            />
          </Button>
          <div>
            <Typography
              variant="small"
              color="blue-gray"
              className="mb-2 text-left font-medium"
            >
              Cardholder Name
            </Typography>
            <Input
              color="gray"
              size="lg"
              placeholder="e.g., John Doe"
              name="name"
              className="placeholder:opacity-100 focus:!border-t-gray-900"
              containerProps={{
                className: "!min-w-full",
              }}
              labelProps={{
                className: "hidden",
              }}
            />
          </div>
          <div>
            <Typography
              variant="small"
              color="blue-gray"
              className="mb-2 text-left font-medium"
            >
              Card Number
            </Typography>
            <Input
              color="gray"
              size="lg"
              placeholder="1234 5678 9012 3456"
              name="number"
              className="placeholder:opacity-100 focus:!border-t-gray-900"
              containerProps={{
                className: "!min-w-full",
              }}
              labelProps={{
                className: "hidden",
              }}
            />
          </div>
          <div className="flex gap-4">
            <div className="w-full">
              <Typography
                variant="small"
                color="blue-gray"
                className="mb-2 text-left font-medium"
              >
                Expiration Date
              </Typography>
              <Input
                color="gray"
                size="lg"
                placeholder="MM/YY"
                name="date"
                className="placeholder:opacity-100 focus:!border-t-gray-900"
                containerProps={{
                  className: "!min-w-full",
                }}
                labelProps={{
                  className: "hidden",
                }}
              />
            </div>
            <div className="w-full">
              <Typography
                variant="small"
                color="blue-gray"
                className="mb-2 text-left font-medium"
              >
                CVV
              </Typography>
              <Input
                color="gray"
                size="lg"
                placeholder="123"
                name="CVV"
                className="placeholder:opacity-100 focus:!border-t-gray-900"
                containerProps={{
                  className: "!min-w-full",
                }}
                labelProps={{
                  className: "hidden",
                }}
              />
            </div>
          </div>
        </DialogBody>
        <DialogFooter>
          <Button className="ml-auto" onClick={handleOpen}>
            submit
          </Button>
        </DialogFooter>
      </Dialog>
    </>
  );
}
```
</CodePreview>

---


<DocsTitle href="dialog-props">
## Dialog Props
</DocsTitle>

The following props are available for the dialog component. These are the custom props
that we've added for the dialog component and you can use all the other
native props as well.

| Attribute   | Type                      | Description                               | Default                                |
| ----------- | ------------------------- | ----------------------------------------- | -------------------------------------- |
| `open`      | <Code>boolean</Code>      | Open the dialog                           | No default value it's a required prop. |
| `handler`   | <Code>function</Code>     | Controls open and close states for dialog | No default value it's a required prop. |
| `size`      | [Size](#types-size)       | Change dialog size                        | <Code>md</Code>                        |
| `dismiss`   | [Dismiss](#types-dismiss) | Change backdrop dismiss listeners         | <Code>undefined</Code>                 |
| `animate`   | [Animate](#types-animate) | Change dialog animation                   | <Code>undefined</Code>                 |
| `className` | <Code>string</Code>       | Add custom className for dialog           | `''`                                   |
| `children`  | <Code>node</Code>         | Add content for dialog                    | No default value it's a required prop. |

<br />
<br />

### For TypeScript Only

```tsx
import type { DialogProps } from "@material-tailwind/react";
```

---

<DocsTitle href="dialog-header-props">
## Dialog Header Props
</DocsTitle>

The following props are available for the dialog header component. These are the custom
props that we've added for the dialog header component and you can use
all the other native props as well.

| Attribute   | Type                | Description                            | Default                                |
| ----------- | ------------------- | -------------------------------------- | -------------------------------------- |
| `className` | <Code>string</Code> | Add custom className for dialog header | `''`                                   |
| `children`  | <Code>node</Code>   | Add content for dialog header          | No default value it's a required prop. |

<br />
<br />

### For TypeScript Only

```tsx
import type { DialogHeaderProps } from "@material-tailwind/react";
```

---

<DocsTitle href="dialog-body-props">
## Dialog Body Props
</DocsTitle>

The following props are available for dialog body components. These are the custom
props that we've added for the dialog body component and you can use all
the other native props as well.

| Attribute   | Type                 | Description                             | Default                                |
| ----------- | -------------------- | --------------------------------------- | -------------------------------------- |
| `divider`   | <Code>boolean</Code> | Add border top & bottom for dialog body | <Code>false</Code>                     |
| `className` | <Code>string</Code>  | Add custom className for dialog body    | `''`                                   |
| `children`  | <Code>node</Code>    | Add content for dialog body             | No default value it's a required prop. |

<br />
<br />

### For TypeScript Only

```tsx
import type { DialogBodyProps } from "@material-tailwind/react";
```

---

<DocsTitle href="dialog-footer-props">
## Dialog Footer Props
</DocsTitle>

The following props are available for dialog footer component. These are the custom
props that we've added for the dialog footer component and you can use
all the other native props as well.

| Attribute   | Type                | Description                            | Default                                |
| ----------- | ------------------- | -------------------------------------- | -------------------------------------- |
| `className` | <Code>string</Code> | Add custom className for dialog footer | `''`                                   |
| `children`  | <Code>node</Code>   | Add content for dialog footer          | No default value it's a required prop. |

<br />
<br />

### For TypeScript Only

```tsx
import type { DialogFooterProps } from "@material-tailwind/react";
```

---

<DocsTitle href="types-size">
## Types - Size
</DocsTitle>

```ts
type size = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
```

---

<DocsTitle href="types-dismiss">
## Types - Dismiss
</DocsTitle>

```ts
type dismissType = {
  enabled?: boolean;
  escapeKey?: boolean;
  referencePress?: boolean;
  referencePressEvent?: 'pointerdown' | 'mousedown' | 'click';
  outsidePress?: boolean | ((event: MouseEvent) => boolean);
  outsidePressEvent?: 'pointerdown' | 'mousedown' | 'click';
  ancestorScroll?: boolean;
  bubbles?: boolean | {
      escapeKey?: boolean;
      outsidePress?: boolean;
  };
};
```

---

<DocsTitle href="types-animate">
## Types - Animate
</DocsTitle>

```ts
type animate = {
  mount?: object;
  unmount?: object;
};
```

---

<DocsTitle href="dialog-theme">
## Dialog Theme
</DocsTitle>

Learn how to customize the theme and styles for dialog components, the theme object for dialog components has three main objects:

**A.** The <Code>defaultProps</Code> object for setting up the default value for props of dialog component.<br />
**B.** The <Code>valid</Code> object for customizing the valid values for dialog component props.<br />
**C.** The <Code>styles</Code> object for customizing the theme and styles of dialog component.<br />

You can customize the theme and styles of dialog components by adding Tailwind CSS classes as key paired values for objects.

<br />
<br />

<DocsTitle href="dialog-theme-object-type">
## Dialog Theme Object Type
</DocsTitle>

```ts
interface DialogStylesType {
  defaultProps: {
    size: string;
    dismiss: {
      enabled: boolean;
      escapeKey: boolean;
      referencePress: boolean;
      referencePressEvent: 'pointerdown' | 'mousedown' | 'click';
      outsidePress: boolean | ((event: MouseEvent) => boolean);
      outsidePressEvent: 'pointerdown' | 'mousedown' | 'click';
      ancestorScroll: boolean;
      bubbles: boolean | {
          escapeKey: boolean;
          outsidePress: boolean;
      };
    };
    animate: {
      mount: object;
      unmount: object;
    };
    className: string;
  };
  valid: {
    sizes: string[];
  };
  styles: {
    base: {
      backdrop: object;
      container: object;
    };
    sizes: {
      xs: object;
      sm: object;
      md: object;
      lg: object;
      xl: object;
      xxl: object;
    };
  };
}
```

<br />
<br />

### For TypeScript Only

```tsx
import type { DialogStylesType } from "@material-tailwind/react";
```

---

<DocsTitle href="dialog-theme-customization">
## Dialog Theme Customization
</DocsTitle>

```tsx
const theme = {
  dialog: {
    defaultProps: {
      size: "md",
      dismiss: {},
      animate: {
        unmount: {},
        mount: {},
      },
      className: "",
    },
    valid: {
      sizes: ["xs", "sm", "md", "lg", "xl", "xxl"],
    },
    styles: {
      base: {
        backdrop: {
          display: "grid",
          placeItems: "place-items-center",
          position: "fixed",
          top: 0,
          left: 0,
          width: "w-screen",
          height: "h-screen",
          backgroundColor: "bg-black",
          backgroundOpacity: "bg-opacity-60",
          backdropFilter: "backdrop-blur-sm",
        },
        container: {
          position: "relative",
          bg: "bg-white",
          m: "m-4",
          borderRadius: "rounded-lg",
          boxShadow: "shadow-2xl",
          color: "text-blue-gray-500",
          fontSmoothing: "antialiased",
          fontFamily: "font-sans",
          fontSize: "text-base",
          fontWeight: "font-light",
          lineHeight: "leading-relaxed",
        },
      },
      sizes: {
        xs: {
          width: "w-full md:w-3/5 lg:w-2/5 2xl:w-1/4",
          minWidth: "min-w-[80%] md:min-w-[60%] lg:min-w-[40%] 2xl:min-w-[25%]",
          maxWidth: "max-w-[80%] md:max-w-[60%] lg:max-w-[40%] 2xl:max-w-[25%]",
        },
        sm: {
          width: "w-full md:w-2/3 lg:w-2/4 2xl:w-1/3",
          minWidth: "min-w-[80%] md:min-w-[66.666667%] lg:min-w-[50%] 2xl:min-w-[33.333333%]",
          maxWidth: "max-w-[80%] md:max-w-[66.666667%] lg:max-w-[50%] 2xl:max-w-[33.333333%]",
        },
        md: {
          width: "w-full md:w-3/4 lg:w-3/5 2xl:w-2/5",
          minWidth: "min-w-[90%] md:min-w-[75%] lg:min-w-[60%] 2xl:min-w-[40%]",
          maxWidth: "max-w-[90%] md:max-w-[75%] lg:max-w-[60%] 2xl:max-w-[40%]",
        },
        lg: {
          width: "w-full md:w-5/6 lg:w-3/4 2xl:w-3/5",
          minWidth: "min-w-[90%] md:min-w-[83.333333%] lg:min-w-[75%] 2xl:min-w-[60%]",
          maxWidth: "max-w-[90%] md:max-w-[83.333333%] lg:max-w-[75%] 2xl:max-w-[60%]",
        },
        xl: {
          width: "w-full md:w-5/6 2xl:w-3/4",
          minWidth: "min-w-[95%] md:min-w-[83.333333%] 2xl:min-w-[75%]",
          maxWidth: "max-w-[95%] md:max-w-[83.333333%] 2xl:max-w-[75%]",
        },
        xxl: {
          display: "flex",
          flexDirection: "flex-col",
          width: "w-screen",
          minWidth: "min-w-[100vw]",
          maxWidth: "max-w-[100vw]",
          height: "h-screen",
          minHeight: "min-h-[100vh]",
          maxHeight: "max-h-[100vh]",
          m: "m-0",
          borderRadius: "rounded-none",
        },
      },
    },
  },
};
```

---

<DocsTitle href="dialog-header-theme-object-type">
## Dialog Header Theme Object Type
</DocsTitle>

```ts
interface DialogHeaderStylesType {
  defaultProps: {
    className: string;
  };
  styles: {
    base: object;
  };
}
```

<br />
<br />

### For TypeScript Only

```tsx
import type { DialogHeaderStylesType } from "@material-tailwind/react";
```

---

<DocsTitle href="dialog-header-theme-customization">
## Dialog Header Theme Customization
</DocsTitle>

```tsx
const theme = {
  dialogHeader: {
    defaultProps: {
      className: "",
    },
    styles: {
      base: {
        display: "flex",
        alignItems: "items-center",
        flexShrink: "shrink-0",
        p: "p-4",
        color: "text-blue-gray-900",
        fontSmoothing: "antialiased",
        fontFamily: "font-sans",
        fontSize: "text-2xl",
        fontWeight: "font-semibold",
        lineHeight: "leading-snug",
      },
    },
  },
};
```

---

<DocsTitle href="dialog-body-theme-object-type">
## Dialog Body Theme Object Type
</DocsTitle>

```ts
interface DialogBodyStylesType {
  defaultProps: {
    className: string;
    divider: boolean;
  };
  styles: {
    base: {
      initial: object;
      divider: object;
    };
  };
}
```

<br />
<br />

### For TypeScript Only

```tsx
import type { DialogBodyStylesType } from "@material-tailwind/react";
```

---

<DocsTitle href="dialog-body-theme-customization">
## Dialog Body Theme Customization
</DocsTitle>

<span id="dialog-body-theme-customization" className="scroll-mt-48" />

```tsx
const theme = {
  dialogBody: {
    defaultProps: {
      className: "",
      divider: false,
    },
    styles: {
      base: {
        initial: {
          position: "relative",
          p: "p-4",
          color: "text-blue-gray-500",
          fontSmoothing: "antialiased",
          fontFamily: "font-sans",
          fontSize: "text-base",
          fontWeight: "font-light",
          lineHeight: "leading-relaxed",
        },
        divider: {
          borderTop: "border-t",
          borderTopColor: "border-t-blue-gray-100",
          borderBottom: "border-b",
          borderBottomColor: "border-b-blue-gray-100",
        },
      },
    },
  },
};
```

---

<DocsTitle href="dialog-footer-theme-object-type">
## Dialog Footer Theme Object Type
</DocsTitle>

```ts
interface DialogFooterStylesType {
  defaultProps: {
    className: string;
  };
  styles: {
    base: object;
  };
}
```

<br />
<br />

### For TypeScript Only

```tsx
import type { DialogFooterStylesType } from "@material-tailwind/react";
```

---

<DocsTitle href="dialog-footer-theme-customization">
## Dialog Footer Theme Customization
</DocsTitle>

```tsx
const theme = {
  dialogFooter: {
    defaultProps: {
      className: "",
    },
    styles: {
      base: {
        display: "flex",
        alignItems: "items-center",
        justifyContent: "justify-end",
        flexShrink: "shrink-0",
        flexWrap: "flex-wrap",
        p: "p-4",
        color: "text-blue-gray-500",
      },
    },
  },
};
```

---

<DocsTitle href="more-examples">
## Explore More Tailwind CSS Examples
</DocsTitle>

Check out more dialog component examples from <a href="https://www.material-tailwind.com/blocks" target="_blank">Material Tailwind Blocks</a>:

• <a href="https://www.material-tailwind.com/blocks/modals" target="_blank">Modals</a><br />
• <a href="https://www.material-tailwind.com/blocks/popup-sections" target="_blank">Popup Blocks</a><br />
